<script setup lang="ts">
import HeaderNav from "@/components/HeaderNav.vue";
import {onMounted, reactive, ref, toRefs} from "vue";
import { useRouter} from "vue-router";
import publicityApi from "@/api/publicity.ts";
import sortApi from "@/api/sort.ts";
import {showNotify} from "vant";

const router = useRouter();
const dataForm = ref({
  title: '',
  accountNumber: '',
  password: '',
  mailbox: '',
  userName: '',
  nickname: '',
  company: '',
  secretSecurity1: '',
  secretSecurity2: '',
  secretSecurity3: '',
  site: '',
  otherInformation: '',
  remark: '',
  sortId: 0,
  sortName: '',
})

const state = reactive({
  fullscreenLoading: false,
  sortList: [],
  passwordStatus: false,
  showPicker: false,
  columns: [{
    text: '',
    value: 0
  }],
  selectedValues: ['']
})
onMounted(async () => {
  await getSortList();
})
// 获取分类列表
const getSortList = async () => {
  const {data} = await sortApi.getTreeList()
  sortList.value = data
  state.columns = data.map((item: any) => {
    return {
      text: item.name,
      value: item.id
    }
  });
}

const onConfirm = ({selectedOptions}: {
  selectedOptions: {
    text: string,
    value: number
  }[]
}) => {
  showPicker.value = false;
  dataForm.value.sortName = selectedOptions[0].text;
  dataForm.value.sortId = selectedOptions[0].value;
};
const onSubmit = () => {
  fullscreenLoading.value = true
  publicityApi
      .add(dataForm.value)
      .then(() => {
        showNotify({ type: 'success', message: '添加成功' });

        fullscreenLoading.value = false
        router.go(-1)
      })
}

const {
  fullscreenLoading,
  sortList,
  passwordStatus,
  showPicker,
  columns,
  selectedValues
} = toRefs(state)
</script>

<template>
  <div class="publicity_warp app_content">
    <!-- 导航栏 -->
    <div class="header_body">
      <header-nav :leftArrow="true" titelText="编辑"></header-nav>
    </div>

    <!-- 中间 -->
    <div class="warp_body">
      <van-overlay style="display: flex;justify-content: center;align-items: center" :show="fullscreenLoading">
        <van-loading/>
      </van-overlay>
      <div class="info-box">
        <van-form colon required="auto" @submit="onSubmit">
          <van-cell-group style="height: 100%" inset>
            <van-field v-model="dataForm.title" name="title" label="标题" placeholder="请输入标题" autocomplete="off"
                       :rules="[{ required: true, message: '请填写标题' }]"/>
            <van-field v-model="dataForm.accountNumber" name="accountNumber" label="账号" placeholder="请输入账号"/>
            <van-field v-model="dataForm.password" name="password" label="密码" placeholder="请输入密码"
                       autocomplete="off"
                       :right-icon="!passwordStatus?'closed-eye':'eye-o'" :type="!passwordStatus?'password':'text'"
                       @click-right-icon="passwordStatus=!passwordStatus"/>
            <van-field v-model="dataForm.mailbox" name="mailbox" label="邮箱" placeholder="请输入邮箱"
                       autocomplete="off"/>
            <van-field v-model="dataForm.userName" name="userName" label="用户名" placeholder="请输入用户名"
                       autocomplete="off"/>
            <van-field v-model="dataForm.nickname" name="nickname" label="昵称" placeholder="请输入昵称"
                       autocomplete="off"/>
            <van-field v-model="dataForm.company" name="company" label="开发公司" placeholder="请输入开发公司"
                       autocomplete="off"
            />
            <van-field v-model="dataForm.secretSecurity1" name="secretSecurity1" label="密保问题1" autocomplete="off"
                       placeholder="请输入密保问题1"/>
            <van-field v-model="dataForm.secretSecurity2" name="secretSecurity2" label="密保问题2" autocomplete="off"
                       placeholder="请输入密保问题2"/>
            <van-field v-model="dataForm.secretSecurity3" name="secretSecurity3" label="密保问题3" autocomplete="off"
                       placeholder="请输入密保问题3"/>
            <van-field v-model="dataForm.site" name="site" label="网站" placeholder="请输入网站" autocomplete="off"
                       :rules="[{ required: true, message: '请填写网站' }]"/>
            <van-field v-model="dataForm.otherInformation" name="otherInformation" label="其他信息" type="textarea"
                       autocomplete="off"
                       placeholder="请输入其他信息"/>
            <van-field v-model="dataForm.remark" name="remark" label="备注" type="textarea" placeholder="请输入备注"
                       autocomplete="off"
            />
            <van-field v-model="dataForm.sortName" name="sortName" label="分类" placeholder="请选择分类" is-link
                       autocomplete="off"
                       readonly :rules="[{ required: true, message: '请选择分类' }]" @click="showPicker = true"
            />
          </van-cell-group>
          <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit">
              提交
            </van-button>
          </div>
        </van-form>
      </div>
    </div>
  </div>

  <van-popup v-model:show="showPicker" round position="bottom">
    <van-picker
        v-model="selectedValues"
        :columns="columns"
        @cancel="showPicker = false"
        @confirm="onConfirm"
    />
  </van-popup>
</template>

<style scoped lang="less">
.app_content {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background-color: #f4f4f4;

  .info-box {
    margin-top: 10px;
    height: 97%;
  }
}

</style>
